<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <HyCard title="分类商品数量(饼图)">
          <PieEchart :pieData="categoryGoodsCount"></PieEchart>
        </HyCard>
      </el-col>
      <el-col :span="10">
        <HyCard title="不同城市商品销量">
          <MapEchart :mapData="addressGoodsSaleValue"></MapEchart>
        </HyCard>
      </el-col>
      <el-col :span="7">
        <HyCard title="分类商品数量(玫瑰图)">
          <RoseEchart :roseData="categoryGoodsCount"></RoseEchart>
        </HyCard>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <HyCard title="分类商品的销量">
          <LineEchart
            :xAxisData="categoryGoodsSaleName"
            :seriesData="categoryGoodsSaleValue"
          ></LineEchart>
        </HyCard>
      </el-col>
      <el-col :span="12">
        <HyCard title="分类商品的收藏">
          <BarEchart
            :xAxisData="categoryGoodsSaleName"
            :seriesData="categoryGoodsFavorValue"
          ></BarEchart>
        </HyCard>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import HyCard from '@/base-ui/HyCard/hy-card.vue';
import PieEchart from '@/components/page-echarts/pie-echart.vue';
import RoseEchart from '@/components/page-echarts/rose-echart.vue';
import LineEchart from '@/components/page-echarts/line-echart.vue';
import BarEchart from '@/components/page-echarts/bar-echart.vue';
import MapEchart from '@/components/page-echarts/map-echart.vue';
import { useStore } from '@/store';
import { computed } from 'vue';
import { mapState } from 'vuex';
const store = useStore();
store.dispatch('dashboard/getAmountGoodsList');
const categoryGoodsCount = computed(() => {
  return store.state.dashboard.categoryGoodsCount.map((item) => {
    return { name: item.name, value: item.goodsCount };
  });
});
const categoryGoodsSaleName = computed(
  () => store.getters['dashboard/categoryGoodsSaleName']
);
const categoryGoodsSaleValue = computed(
  () => store.getters['dashboard/categoryGoodsSaleValue']
);
const categoryGoodsFavorValue = computed(
  () => store.getters['dashboard/categoryGoodsFavorValue']
);
const addressGoodsSaleValue = computed(
  () => store.getters['dashboard/addressGoodsSaleValue']
);
</script>

<style scoped></style>
